<template>
  <div class="recommend">
    <div class="title">
      热销推荐
    </div>
    <ul>
      <router-link 
      tag='li' 
      :to="'/detail?id='+item.id" 
      class='item border-bottom' 
      v-for='(item,key) of recommendList' 
      :key='item.id'
      >
        <img :src="item.imgUrl" class='item-img' alt="">
        <div class="item-info">
          <p class="item-title">{{ item.title }}</p>
          <p class="item-desc">{{ item.desc }}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Recommend',
  props:{
    recommendList:Array
  },
  data() { 
    return {
      
    }
  },
  methods: {

  },
  mounted() {

  },
 }
</script>

<style lang="stylus" scoped>
@import '~styles/minxins.styl';
.title
  margin-top:0.2rem;
  line-height :0.8rem;
  background :$titleBackground;
  text-indent: .2rem
.item
  overflow:hidden
  display:flex
  height:1.9rem;
  // background:red; 
  .item-img
    width:1.7rem;
    height:1.7rem;
    padding:0.1rem;
  .item-info
    flex:1
    padding:0.1rem;
    min-width:0
    .item-title
      line-height:0.54rem;
      font-size:0.32rem;
      ellipsis()
    .item-desc
        line-height: .4rem
        color: #cccccc
        ellipsis()
      .item-button
        line-height: .44rem
        margin-top: .16rem
        background: #ff9300
        padding: 0 .2rem
        border-radius: .06rem
        color: #fff
        font-size:0.2rem;
</style>